import React, { useState } from 'react';
import {
  Input,
  Button,
  List,
  Space,
  Typography,
  Divider,
  InputNumber,
} from 'antd';
import { MinusCircleOutlined } from '@ant-design/icons';

const RandomDraw = () => {
  const [items, setItems] = useState([]);
  const [input, setInput] = useState('');
  const [count, setCount] = useState(1);
  const [drawnItems, setDrawnItems] = useState([]);

  const addItem = () => {
    if (input.trim()) {
      setItems([...items, input.trim()]);
      setInput('');
    }
  };

  const removeItem = index => {
    setItems(items.filter((_, i) => i !== index));
  };

  const handleDraw = () => {
    if (count > items.length) {
      alert('抽取个数不能大于列表长度！');
      return;
    }

    const shuffledItems = [...items].sort(() => Math.random() - 0.5);
    setDrawnItems(shuffledItems.slice(0, count));
  };

  return (
    <div>
      <Space direction='vertical'>
        <Input
          placeholder='输入项目'
          value={input}
          onChange={e => setInput(e.target.value)}
          onPressEnter={addItem}
        />
        <Button onClick={addItem}>添加项目</Button>
        <Divider />
        <List
          dataSource={items}
          renderItem={(item, index) => (
            <List.Item
              actions={[
                <MinusCircleOutlined
                  onClick={() => removeItem(index)}
                  style={{ color: 'red' }}
                />,
              ]}>
              <Typography.Text>{item}</Typography.Text>
            </List.Item>
          )}
        />
        <Divider />
        <Space>
          <span>抽取个数:</span>
          <InputNumber
            min={1}
            value={count}
            onChange={value => setCount(value)}
          />
          <Button onClick={handleDraw}>抽签</Button>
        </Space>
        <Divider />
        <div>
          <Typography.Title level={4}>抽中的项目:</Typography.Title>
          <List
            dataSource={drawnItems}
            renderItem={item => <List.Item>{item}</List.Item>}
          />
        </div>
      </Space>
    </div>
  );
};

export default RandomDraw;
